<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../../../resources/js/echarts/echarts.min.js"></script>
    <script src="../../../resources/js/html2canvas/html2canvas.min.js"></script>
    <script src="../../../resources/js/jsPDF/jsPDF.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例

    var main = document.getElementById('main')

    var myChart = echarts.init(main);

    // 指定图表的配置项和数据
    var option = {
        backgroundColor: '#fff',
        title: {
            text: 'NPS',
            x : 'center'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var time = '';
                var str = '';
                for (var i of params) {
                    time = i.name.replace(/\n/g, '') + '<br/>';
                    if (i.data == 'null' || i.data == null) {
                        str += i.seriesName + '：无数据' + '<br/>'
                    } else {
                        str += i.seriesName + '：' + i.data  + '%<br/>'
                    }

                }
                return time + str;
            }
        },
        legend: {
            x: 'center',
            y: 'bottom',
            data: ['NPS'],
            textStyle: {
                color: 'black'
            },
            selectedMode: false
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                saveAsImage: {
                    show: true
                },
                myTool1: {
                    show: true,
                    title: '保存为PDF',
                    icon: 'image://../../../resources/imgs/icon/pdf.png',
                    onclick: function (ecModel,api){
                        var model = this.model;
                        var title = model.get('name') || ecModel.get('title.0.text') || 'echarts';
                        var type = model.get('type', true) || 'png';
                        var url = api.getConnectedDataURL({
                            type: type,
                            backgroundColor: model.get('backgroundColor', true)
                            || ecModel.get('backgroundColor') || '#fff',
                            connectedBackgroundColor: '#fff',
                            excludeComponents: ['toolbox'],
                            pixelRatio: 1
                        });
                        var doc = new jsPDF('p', 'px');
                        doc.addImage(url, 5, 5, main.height,main.width, 'img');
                        doc.save(title + '.pdf')
                    }
                }
            }
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data:['1月', '2月', '3月', '4月', '5月'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: "black", //X轴文字颜色
                    fontSize: 16
                }
            }
        }],
        yAxis: [{
            type: 'value',
            axisLabel: {
                formatter: '{value}% ',//左侧Y轴文字显示
                color: 'black',
                textStyle: {
                    fontSize: 16
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#ccc"
                }
            }
        }],
        series: [{
            name: 'NPS',
            type: 'line',
            data: [75.1, 73.0, 57.9, 49.5, 42.2],
            lineStyle: {
                normal: {
                    width: 8,
                    color: {
                        type: 'linear',
                        colorStops: [{
                            offset: 0,
                            color: 'orange' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'orange' // 100% 处的颜色
                        }]
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: 'orange',
                    borderWidth: 10,
                    borderColor: 'orange'
                }
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: 'red'
                },
                formatter: '{c}%'
            }
        }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>